<script setup>
import { ref } from 'vue';

defineProps({
    image: {
        type: String
    }
})
const slider = ref(undefined)
const zoom = ref(undefined)
function doMove(e){
    let x = e.offsetX -100
    let y =e.offsetY -100
    if(x< 0) x=0
    if(y<0)y=0
    if(x>200)x=200 
    if(y>200)y=200
    slider.value.style.left =  x+ 'px'
    slider.value.style.top =  y+ 'px'
     zoom.value.style.left =  (-2*x)+ 'px'
    zoom.value.style.top =  (-2*y)+ 'px'
}

</script>

<template>
    <div class="img_view"  >
        <div class="event" @mousemove="doMove"></div>
        <!-- <img src="" alt=""  @mousemove="doMove"> -->
        <img :src="image" alt=""  @mousemove="doMove">
        <div class="slider" ref="slider"></div>
        <div class="zoom" >
            <img :src="image" alt="" ref="zoom">
            <!-- <img src="" alt="" ref="zoom"> -->
        </div>
    </div>
</template>

<style scoped lang="less">
.img_view {
    position: relative;
    width: 400px;
    height: 400px;
    .event{
        position: absolute;
        z-index: 998;
        width: 100%;
        height: 100%;
    }
    .slider{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height:200px;
        background: rgba(105, 101, 101, .3);
    }
    &:hover .slider{
        display: block;
    }

    &:hover .zoom {
        display: block;
    }

    .zoom {
        overflow: hidden;
        display: none;
        position: absolute;
        top: 0;
        left: 410px;
        width: 100%;
        height: 100%;
      img{
        position: absolute;
        width: 200%;
        height: 200%;
      }
    }

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
